<template>
  <v-skeleton-loader
    v-if="loading"
    type="article, list-item@20"
  ></v-skeleton-loader>
  <v-card
    v-else
    max-width="100%"
    height="calc(100vh - 104px)"
    class="mx-auto projects-container"
    tile
    color="#f5f5f5"
    flat
  >
    <ProjectsItem
      v-for="project in projects"
      :key="project.id"
      :item="project"
      v-bind="$attrs"
    />
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ProjectsItem from "@/components/Project/Projects/ProjectsItem.vue";
import { IProject } from "@/components/Project/index";

@Component({
  components: {
    ProjectsItem,
  },
})
export default class Projects extends Vue {
  loading = false;
  get projects(): IProject[] {
    return this.$store.state.ProjectsStore.projects;
  }

  setProjects() {
    this.loading = true;
    setTimeout(() => {
      const projects: IProject[] = [
        {
          id: "1",
          number: "000092",
          customerName: "Auto Company",
          contactPerson: "Tim Wong",
          progress: 40,
          projectSum: 4,
          jobsSum: 15,
          tasksSum: 8,
          updateDate: "2021-11-12",
          updateTime: "15:23:46",
          projectList: [
            {
              id: "1",
              tel: "9028 2389",
              address: "timwong@yahoo.com",
              companyName: "Auto Company",
              companyCode: "000092",
              contactPerson: "Tim Wong",
              projectName: "Service Report testing",
              projectNumber: "20211209",
              priority: "Low",
              projectType: "DL",
              projectDescription:
                "Check control panels and electrical wiring to identify issues",
              projectLocation:
                " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
              serviceProvider: "e-solutions",
              startDate: "2021-12-09",
              endDate: "2021-12-09",
              jobSum: 5,
              tasksSum: 2,
              partnerList: [
                {
                  userID: "1",
                  contactName: "Admin",
                  tel: "9322 2388",
                  location: "Office",
                  contractor: "CON",
                  contactCode: "CON-0002",
                  companyName: "Sample Contractor",
                },
                {
                  userID: "2",
                  contactName: "Sasa",
                  tel: "9348 2389",
                  location: "Office",
                  contractor: "SUP",
                  contactCode: "CON-0001",
                  companyName: "Sample Contractor A",
                },
              ],
              userRight: {
                commonUserRightList: [],
                advancedUserRightList: [],
              },
            },
            {
              id: "2",
              tel: "9028 2389",
              address: "timwong@yahoo.com",
              companyName: "Auto Company",
              companyCode: "000104",
              contactPerson: "Tim Wong",
              projectName: "System Integration test",
              projectNumber: "20211213",
              priority: "High",
              projectType: "TA",
              projectDescription:
                "Check control panels and electrical wiring to identify issues",
              projectLocation:
                " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
              serviceProvider: "e-solutions",
              startDate: "2021-12-09",
              endDate: "2021-12-09",
              jobSum: 4,
              tasksSum: 3,
              partnerList: [
                {
                  userID: "1",
                  contactName: "Admin",
                  tel: "9322 2388",
                  location: "Office",
                  contractor: "CON",
                  contactCode: "CON-0002",
                  companyName: "Sample Contractor",
                },
                {
                  userID: "2",
                  contactName: "Sasa",
                  tel: "9348 2389",
                  location: "Office",
                  contractor: "SUP",
                  contactCode: "CON-0001",
                  companyName: "Sample Contractor A",
                },
              ],
              userRight: {
                commonUserRightList: [],
                advancedUserRightList: [],
              },
            },
          ],
        },
        {
          id: "2",
          number: "000095",
          customerName: "FIDELITY",
          contactPerson: "Tim Wong",
          progress: 20,
          projectSum: 2,
          jobsSum: 5,
          tasksSum: 4,
          updateDate: "2021-11-12",
          updateTime: "15:23:46",
          projectList: [
            {
              id: "5",
              tel: "9028 2389",
              address: "timwong@yahoo.com",
              companyCode: "000214",
              companyName: "Auto Company",
              contactPerson: "Tim Wong",
              projectName: "Service Report testing",
              projectNumber: "20211209",
              priority: "Low",
              projectType: "DL",
              projectDescription:
                "Check control panels and electrical wiring to identify issues",
              projectLocation:
                " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
              serviceProvider: "e-solutions",
              startDate: "2021-12-09",
              endDate: "2021-12-09",
              jobSum: 5,
              tasksSum: 2,
              partnerList: [
                {
                  userID: "1",
                  contactName: "Admin",
                  tel: "9322 2388",
                  location: "Office",
                  contractor: "CON",
                  contactCode: "CON-0002",
                  companyName: "Sample Contractor",
                },
                {
                  userID: "2",
                  contactName: "Sasa",
                  tel: "9348 2389",
                  location: "Office",
                  contractor: "SUP",
                  contactCode: "CON-0001",
                  companyName: "Sample Contractor A",
                },
              ],
              userRight: {
                commonUserRightList: [],
                advancedUserRightList: [],
              },
            },
          ],
        },
      ];
      this.$store.commit("ProjectsStore/setProjects", projects);
      this.loading = false;
    }, 1400);
  }

  getProjects() {
    if (!this.projects) {
      this.setProjects();
    }
  }

  created() {
    this.getProjects();
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Projects/Projects.scss";
</style>
